<!DOCTYPE html>
<html class="no-js" lang="en-us">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>HTML简介 - 唐宋缘明卿的博客</title>
	<script>(function(d,e){d[e]=d[e].replace("no-js","js");})(document.documentElement,"className");</script>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	
	<meta name="description" content="">
	<meta name="generator" content="Hugo 0.68.3" />
	
	
	<link rel="dns-prefetch" href="//fonts.googleapis.com">
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700">
	<link rel="stylesheet" href="/ghhs_technology_blog/css/style.css">	
	<link rel="stylesheet" type="text/css" href="/ghhs_technology_blog/css/highlight.css">
	
	
	
	<link rel="shortcut icon" href="/ghhs_technology_blog/favicon.ico">
		
	
</head>
<body class="body">
	<div class="container container--outer">
		<header class="header">
	<div class="container">
		<div class="logo">
			<a class="logo__link" href="/ghhs_technology_blog/" title="唐宋缘明卿的博客" rel="home">
			<div class="logo__title">唐宋缘明卿的博客</div>			
				 
			</a>
			
		</div>
		
<nav class="menu">
	<button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
		<span class="menu__btn-title" tabindex="-1">选择</span>
	</button>
	<ul class="menu__list">
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/about/">关于我</a>
		</li>
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/post/">博客</a>
		</li>
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/timeline/">时间轴</a>
		</li>
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/resume/">简历</a>
		</li>
	</ul>
</nav>

	</div>
</header>
		<div class="wrapper flex">
			<div class="primary">
			
<main class="main" role="main">
	<article class="post">
		<header class="post__header">
			<h1 class="post__title">HTML简介</h1>
			<div class="post__meta meta">
<div class="meta__item-datetime meta__item">
	<svg class="meta__icon icon icon-time" width="16" height="14" viewBox="0 0 30 28"><path d="M15 0C7 0 1 6 1 14s6 14 14 14 14-6 14-14S23 0 15 0zm0 25C9 25 4 20 4 14S9 3 15 3s11 5 11 11-5 11-11 11zm1-18h-2v8.4l6.8 4.4L22 18l-6-3.8V7z"/></svg>
	<time class="meta__text" datetime="2015-04-03T14:36:41">April 03, 2015</time>
</div>
<div class="meta__item-datetime meta__item">
	<svg class="meta__icon icon icon-time" width="16" height="14" viewBox="0 0 30 28"><path d="M15 0C7 0 1 6 1 14s6 14 14 14 14-6 14-14S23 0 15 0zm0 25C9 25 4 20 4 14S9 3 15 3s11 5 11 11-5 11-11 11zm1-18h-2v8.4l6.8 4.4L22 18l-6-3.8V7z"/></svg>
	<time class="meta__text">1 分钟</time>
</div></div>
		</header>
<div class="content post__content clearfix">
			<hr>
<h2 id="什么是-html">什么是 HTML？</h2>
<h4 id="html-是用来描述网页的一种语言">HTML 是用来描述网页的一种语言。</h4>
<ul>
<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
<li>标记语言是一套标记标签 (markup tag)</li>
<li>HTML 使用标记标签来描述网页</li>
</ul>
<hr>
<h2 id="html-标签">HTML 标签</h2>
<h4 id="html-标记标签通常被称为-html-标签-html-tag">HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</h4>
<ul>
<li>HTML 标签是由尖括号包围的关键词，比如 <code> &lt;html&gt;</code></li>
<li>HTML 标签通常是成对出现的，比如<code>&lt;b&gt;</code> 和 <code>&lt;/b&gt;</code></li>
<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
<li>开始和结束标签也被称为开放标签和闭合标签</li>
</ul>
<hr>
<h2 id="html-文档--网页">HTML 文档 = 网页</h2>
<ul>
<li>HTML 文档描述网页</li>
<li>HTML 文档包含 HTML 标签和纯文本</li>
<li>HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">html</span>&gt;
&lt;<span style="color:#f92672">body</span>&gt;

&lt;<span style="color:#f92672">h1</span>&gt;我的第一个标题&lt;/<span style="color:#f92672">h1</span>&gt;

&lt;<span style="color:#f92672">p</span>&gt;我的第一个段落。&lt;/<span style="color:#f92672">p</span>&gt;

&lt;/<span style="color:#f92672">body</span>&gt;
&lt;/<span style="color:#f92672">html</span>&gt;
</code></pre></div>
		</div>
		
	</article>
</main>







			</div>
			<aside class="sidebar"><div class="widget-search widget">
	<form class="widget-search__form" role="search" method="get" action="https://google.com/search">
		<label>
			<input class="widget-search__field" type="search" placeholder="搜索..." value="" name="q" aria-label="搜索...">
		</label>
		<input class="widget-search__submit" type="submit" value="Search">
		<input type="hidden" name="sitesearch" value="/ghhs_technology_blog/" />
	</form>
</div>
<div class="widget-recent widget">
	<h4 class="widget__title">近期文章</h4>
	<div class="widget__content">
		<ul class="widget__list">
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/one/">HELLO WORLD!</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/html/">HTML简介</a></li>
		</ul>
	</div>
</div>
<div class="widget-social widget">
	<h4 class="widget-social__title widget__title">社群</h4>
	<div class="widget-social__content widget__content">
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Facebook" rel="noopener noreferrer" href="https://facebook.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-facebook" viewBox="0 0 352 352" width="24" height="24" fill="#fff"><path d="m0 32v288c0 17.5 14.5 32 32 32h288c17.5 0 32-14.5 32-32v-288c0-17.5-14.5-32-32-32h-288c-17.5 0-32 14.5-32 32zm320 0v288h-83v-108h41.5l6-48h-47.5v-31c0-14 3.5-23.5 23.5-23.5h26v-43.5c-4.4-.6-19.8-1.5-37.5-1.5-36.9 0-62 22.2-62 63.5v36h-42v48h42v108h-155v-288z"/></svg>
				<span>Facebook</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Twitter" rel="noopener noreferrer" href="https://twitter.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-twitter" viewBox="0 0 384 312" width="24" height="24" fill="#fff"><path d="m384 36.9c-14.1 6.3-29.3 10.5-45.2 12.4 16.3-9.7 28.8-25.2 34.6-43.6-15.2 9-32.1 15.6-50 19.1-14.4-15.2-34.9-24.8-57.5-24.8-43.5 0-78.8 35.3-78.8 78.8 0 6.2.7 12.2 2 17.9-65.5-3.3-123.5-34.6-162.4-82.3-6.7 11.6-10.6 25.2-10.6 39.6 0 27.3 13.9 51.4 35 65.6-12.9-.4-25.1-4-35.7-9.9v1c0 38.2 27.2 70 63.2 77.2-6.6 1.8-13.6 2.8-20.8 2.8-5.1 0-10-.5-14.8-1.4 10 31.3 39.1 54.1 73.6 54.7-27 21.1-60.9 33.7-97.8 33.7-6.4 0-12.6-.4-18.8-1.1 34.9 22.4 76.3 35.4 120.8 35.4 144.9 0 224.1-120 224.1-224.1 0-3.4-.1-6.8-.2-10.2 15.4-11.1 28.7-25 39.3-40.8z"/></svg>
				<span>Twitter</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Instagram" rel="noopener noreferrer" href="https://www.instagram.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-instagram" viewBox="0 0 256 256" width="24" height="24" fill="#fff"><circle cx="193" cy="59" r="15"/><path fill-rule="evenodd" d="M101 0h54c41 0 58.4 3.9 74.5 17C256.2 37.5 256 74.8 256 97.7v60c0 26.7 0 60.4-26.5 81.4-16 13.4-33.5 16.9-74.5 16.9h-54c-41 0-57.5-3.5-74.5-16.9C1 218.9.5 186.3.1 160.5L0 155V97.7c0-23-.2-60.2 26.5-80.7C45 2 60 0 101 0zm4.9 23h44.3c45.8 0 58.3 3.5 70.3 17.5 11.8 13.2 12 30.1 12.5 62.9V156c.2 20.8.3 45.8-12.5 59.5-12 14-24.5 17.5-70.3 17.5h-44.3c-45.9 0-57.3-3.5-70.4-17.5-12.2-13-12.3-36.5-12.4-56.7v-55.6c.4-32.6.7-49.6 12.4-62.7C48 26.5 60 23 105.9 23zm19.6 144.5a42 42 0 1 0 0-84 42 42 0 0 0 0 84zm0 22.5a64.5 64.5 0 1 0 0-129 64.5 64.5 0 0 0 0 129z"/></svg>
				<span>Instagram</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="LinkedIn" rel="noopener noreferrer" href="https://linkedin.com/in/username" target="_blank">
				<svg class="widget-social__link-icon icon-linkedin" viewBox="0 0 352 352" width="24" height="24" fill="#fff"><path d="M0,40v272c0,21.9,18.1,40,40,40h272c21.9,0,40-18.1,40-40V40c0-21.9-18.1-40-40-40H40C18.1,0,0,18.1,0,40z M312,32 c4.6,0,8,3.4,8,8v272c0,4.6-3.4,8-8,8H40c-4.6,0-8-3.4-8-8V40c0-4.6,3.4-8,8-8H312z M59.5,87c0,15.2,12.3,27.5,27.5,27.5 c15.2,0,27.5-12.3,27.5-27.5c0-15.2-12.3-27.5-27.5-27.5C71.8,59.5,59.5,71.8,59.5,87z M187,157h-1v-21h-45v152h47v-75 c0-19.8,3.9-39,28.5-39c24.2,0,24.5,22.4,24.5,40v74h47v-83.5c0-40.9-8.7-72-56.5-72C208.5,132.5,193.3,145.1,187,157z M64,288h47.5 V136H64V288z"/></svg>
				<span>LinkedIn</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Telegram" rel="noopener noreferrer" href="https://t.me/username" target="_blank">
				<svg class="widget-social__link-icon icon-telegram" viewBox="0 0 132 110" width="24" height="24"><path fill="#ddd" d="M50 103c-4 0-3-1-5-5L34 60l88-52"/><path fill="#aaa" d="M50 103c3 0 4-1 6-3l16-16-20-12"/><path fill="#fff" d="M52 72l48 36c6 3 10 2 11-5l20-93c2-8-3-11-8-9L7 45c-8 4-8 8-1 10l29 9 69-43c3-2 6-1 4 1"/></svg>
				<span>Telegram</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="GitHub" rel="noopener noreferrer" href="https://github.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-github" viewBox="0 0 384 374" width="24" height="24" fill="#fff"><path d="m192 0c-106.1 0-192 85.8-192 191.7 0 84.7 55 156.6 131.3 181.9 9.6 1.8 13.1-4.2 13.1-9.2 0-4.6-.2-16.6-.3-32.6-53.4 11.6-64.7-25.7-64.7-25.7-8.7-22.1-21.3-28-21.3-28-17.4-11.9 1.3-11.6 1.3-11.6 19.3 1.4 29.4 19.8 29.4 19.8 17.1 29.3 44.9 20.8 55.9 15.9 1.7-12.4 6.7-20.8 12.2-25.6-42.6-4.8-87.5-21.3-87.5-94.8 0-20.9 7.5-38 19.8-51.4-2-4.9-8.6-24.3 1.9-50.7 0 0 16.1-5.2 52.8 19.7 15.3-4.2 31.7-6.4 48.1-6.5 16.3.1 32.7 2.2 48.1 6.5 36.7-24.8 52.8-19.7 52.8-19.7 10.5 26.4 3.9 45.9 1.9 50.7 12.3 13.4 19.7 30.5 19.7 51.4 0 73.7-44.9 89.9-87.7 94.6 6.9 5.9 13 17.6 13 35.5 0 25.6-.2 46.3-.2 52.6 0 5.1 3.5 11.1 13.2 9.2 76.2-25.5 131.2-97.3 131.2-182 0-105.9-86-191.7-192-191.7z"/></svg>
				<span>GitHub</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Bitbucket" rel="noopener noreferrer" href="https://bitbucket.org/username" target="_blank">
				<svg class="widget-social__link-icon icon-bitbucket" viewBox="0 0 256 231" width="24" height="24" fill="#fff"><path d="M8.308 0A8.202 8.202 0 0 0 .106 9.516l34.819 211.373a11.155 11.155 0 0 0 10.909 9.31h167.04a8.202 8.202 0 0 0 8.201-6.89l34.82-213.752a8.202 8.202 0 0 0-8.203-9.514L8.308 0zm146.616 152.768h-53.315l-14.436-75.42h80.67l-12.919 75.42z"/></svg>
				<span>Bitbucket</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Google Plus" rel="noopener noreferrer" href="https://plus.google.com/profileid" target="_blank">
				<svg class="widget-social__link-icon icon-googleplus" viewBox="0 0 512 512" width="24" height="24" fill="#fff"><path d="M0 279c-2-92 66-170 156-173 43-2 83 15 115 45l-43 45C201 177 167 164 132 177c-53 19-81 81-62 136s79 85 132 64c28-11 45-38 53-64l-92 0v-60H320c0 49-4 98-34 136-60 70-162 77-228 15C22 373 2 328 0 279L0 279zM418 205h47l0 49H512v49h-47l0 49h-47v-49h-47v-49h47V205z"/></svg>
				<span>profileid</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Email" href="mailto:g617415200@gmail.com">
				<svg class="widget-social__link-icon icon-mail" viewBox="0 0 416 288" width="24" height="24" fill="#fff"><path d="m0 16v256 16h16 384 16v-16-256-16h-16-384-16zm347 16-139 92.5-139-92.5zm-148 125.5 9 5.5 9-5.5 167-111.5v210h-352v-210z"/></svg>
				<span>g617415200@gmail.com</span>
			</a>
		</div>
	</div>
</div>

</aside>
		</div>
		<footer class="footer">
	<div class="container footer__container flex">
		
		<div class="footer__copyright">
			&copy; 2020 唐宋缘明卿的博客.
			<span class="footer__copyright-credits">使用 <a href="https://gohugo.io/" rel="nofollow noopener" target="_blank">Hugo</a> 技术与 <a href="https://github.com/kingfsen/Mainroad/" rel="nofollow noopener" target="_blank">Mainroad</a>主题</span>
		</div>
	</div>
</footer>
	</div>
<script async defer src="/ghhs_technology_blog/js/menu.js"></script>
<script async src="/ghhs_technology_blog/js/highlight.js"></script>

<script type="text/javascript">
    (function(){
        $("pre code").parent().addClass("line-numbers")
    }())
</script>

</body>
</html>